<html lang="zn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子布局</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="q">
        <header>
            <h1>
                Cemal Can Dinca
            </h1>
            <p>
                Owner/Designer/Creator
            </p>
            <a href="#">Contact Me</a>

            <div class="w">
                <img src="https://via.placeholder.com/16" alt="">
                <img src="https://via.placeholder.com/16" alt="">
                <img src="https://via.placeholder.com/16" alt="">
                <img src="https://via.placeholder.com/16" alt="">

        </header>

        <section class="x">
            <div class="e">
                <img class="one" src="https://via.placeholder.com/300x350" alt="">
                <h3>One</h3>
                <p>Lorem ipsum dolor sit amet. conctetur ellt. Amenean alliquam erat ligula, eu pretium tellus hurtum et.</p>
                <img ciass="two" src="https://via.placeholder.com/300x350" alt="">
                <h3>One</h3>
                <p>
                    orem ipsum dolor sit amet,consectetur- adipiscing elit. Amenean aliquen erat ligula, eu pretium tellus rutrum et.
                </p>
            </div>
            <div class="r">
                <p class="size">Lorem ipsum dolor Lorem ipsum dolor sit amet. conctetur ellt. Amenean alliquam erat ligula, eu pretium tellus hurtum et.Lorem ipsum dolor sit amet. conctetur ellt. Amenean alliquam erat ligula, eu pretium tellus hurtum et.Lorem ipsum dolor
                    sit amet. conctetur ellt. Amenean alliquam erat ligula, eu pretium tellus hurtum et.
                </p>
                <p class="size">Lorem lpsum dolor sit- amet. consectetur adipiscing elit. Amenean, aliquam erat. ligula, eu pretiumtellus rutrum et. Etiam eget Imprerdie - emni; in- lucast Lorem"lpsum dolor sit amet consectetur adipiscing elit. Amenean allquam erat ligula,
                    eu pretium tellus rutrum et. Etiam eget imprerdie emni, In lucast.
                </p>
                <div class="t">
                    <img class="h" src="https://via.placeholder.com/260x350" alt="">
                    <img class="g" src="https://via.placeholder.com/125x110" alt="">
                    <img class="b" src="https://via.placeholder.com/125x110" alt="">
                </div>
            </div>
        </section>





</html>